<template>
  <div :class="['online-video', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="banner">
      <img class="banner" :src="bannerList?.url" alt="" />
    </div>
    <div class="online-video-list">
      <div class="left-menu">
        <ul>
          <li
            :class="['menu', activeMenu === index ? 'active-menu' : '']"
            v-for="(item, index) in menuList"
            :key="item.data_id"
            @click="handleMenu(item, index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="right-video" v-if="videoList.length !== 0">
        <div
          class="content"
          v-for="(item, index) in videoList"
          :key="index"
          @click="goDesc(item)"
        >
          <div class="image">
            <el-image
              v-show="item.video_page"
              :src="item.video_page"
              fit="cover"
              alt=""
            />
            <div class="time-long" v-show="item.time">
              <div class="mark">
                {{ item.time }}
              </div>
              <div class="text all-center">{{ item.time }}</div>
            </div>
          </div>
          <div class="title" :title="item.video_name">
            {{ item.video_name }}
          </div>
          <div class="foot">
            <span class="name">{{ item.art_name }}</span>
            <!-- <span class="date">{{ item.video_date }}</span> -->
            <span class="watch">{{ item.view_times }}</span>
            <img
              src="@/static/img/editPersonalHome/zhenyan.png"
              class="view_times"
              alt=""
            />
          </div>
        </div>
      </div>
      <el-empty v-else description="暂无数据"></el-empty>
      <div
        @click="lookMore"
        v-if="!$ua.isFromPc()"
        class="look-more"
        v-show="this.videoList.length < this.videoTotal"
      >
        查看更多
      </div>
      <!-- <div v-else>123</div> -->
    </div>
    <Pagin
      ref="page"
      v-show="videoList.length !== 0 && $ua.isFromPc()"
      :func="getDataList"
      :pagesSizes="[10, 20, 30, 50]"
      :sizeNum="12"
      :layout="'prev, pager, next'"
      background
      :position="'center'"
      class="pagin"
    ></Pagin>
  </div>
</template>

<script>
import Pagin from "@/components/pagin.vue";
import { getImgUrl } from "@/utils/downloadFile";
// import getVideoTime from '@/utils/utils'
export default {
  name: "onlineVideo",
  components: {
    Pagin,
  },
  props: {},
  data() {
    return {
      bannerList: {},
      videoList: [],
      videoTotal: 0,
      page_num: 1,
      page_count: 6,
      menuList: [],
      video_type: "",
      activeMenu: null,
      page_num: 1,
    };
  },
  asyncData({ $api }) {},
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.videoType();
    this.bannerList = this.$store.state.router.router[0].children.filter(
      (item) => {
        return item.path === location.pathname;
      }
    )[0]?.meta?.banner_list[0];
    console.log("this.bannerList", this.bannerList);
  },
  methods: {
    getImgUrl,
    getVideoTime(url, index) {
      const videoUrl = url;
      const video = document.createElement("video");

      video.addEventListener("loadedmetadata", () => {
        const duration = video.duration;
        this.$set(this.videoList[index], "time", this.changeTime(duration));
      });

      video.setAttribute("src", videoUrl);
      video.setAttribute("preload", "metadata");
    },
    changeTime(duration) {
      const hour = parseInt(duration / 3600);
      const minute = parseInt((duration % 3600) / 60);
      const second = parseInt(duration % 60);
      let result = "";
      if (hour > 0) {
        result =
          this.formatTimeStr(hour) +
          ":" +
          this.formatTimeStr(minute) +
          ":" +
          this.formatTimeStr(second);
      } else {
        result = this.formatTimeStr(minute) + ":" + this.formatTimeStr(second);
      }
      console.log("result", result);
      return result; //转化成分，秒
    },
    formatTimeStr(val) {
      if (val > 9) {
        return val;
      } else {
        return "0" + val;
      }
    },
    videoType() {
      this.$api.videoType({}).then((res) => {
        if (res.status == "$SUCCESS") {
          this.menuList = res.result.item_list;
          this.handleMenu(this.menuList[0], 0);
        }
      });
    },
    lookMore() {
      this.page_num += 1;
      this.getOnlineVideo();
    },
    handleMenu(item, index) {
      this.activeMenu = index;
      this.video_type = item.data_id;
      if (this.$ua.isFromPc()) {
        this.refresh();
      } else {
        this.page_num = 1;
        this.videoList = [];
        this.getOnlineVideo();
      }
    },
    refresh() {
      console.log(this.$refs.page);
      this.$refs.page.refresh();
    },
    getOnlineVideo() {
      const params = {
        page_num: this.page_num,
        page_count: this.page_count,
        video_type: this.video_type,
      };
      this.$api.getOnlineVideo({ ...params }).then((res) => {
        if (res.status == "$SUCCESS") {
          if (Array.isArray(res.result.item_list)) {
            this.videoTotal = res.result.total_count;
            res.result.item_list.forEach((item) => this.videoList.push(item));
            this.videoList.length > 0 &&
              this.videoList.forEach((item, index) => {
                this.getVideoTime(item.video_path, index);
              });
          } else {
            this.videoList = [];
          }
        }
      });
    },
    getDataList(page, page_size, callback) {
      let params = {
        page_num: page,
        page_count: page_size,
        video_type: this.video_type,
        // art_id: this.$store.state.user.info?.user_info?.data_id || ''
      };
      // 这里要写接口然后把数据和total丢进去
      this.$api.getOnlineVideo({ ...params }).then((res) => {
        if (res.status == "$SUCCESS") {
          this.videoList = Array.isArray(res.result.item_list)
            ? res.result.item_list
            : [];
          this.videoList.length > 0 &&
            this.videoList.forEach((item, index) => {
              this.getVideoTime(item.video_path, index);
            });
          callback(this.videoList, res.result.total_count);
        }
      });
    },
    // 进入视频详情页
    goDesc(data) {
      this.$router.push({
        path: "/onlineVideo/desc",
        query: { data_id: data.data_id },
      });
    },
  },
};
</script>

<style scoped lang="less">
.online-video {
  &.z-web {
    .banner {
      width: 100%;
      height: 600px;
      object-fit: cover;
    }
    .online-video-list {
      display: flex;
      margin-bottom: 20px;
      padding: 60px 276px;

      .left-menu {
        line-height: 23px;
        font-size: 24px;
        font-weight: bold;
        color: #898989;
        // margin-right: 107px;
        display: inline-block;

        .menu {
          margin-bottom: 35px;
          // float: left;
          width: 180px;
          height: 30px;
          line-height: 30px;
          overflow: hidden;
          cursor: pointer;

          &.active-menu {
            color: #000;
          }
        }
      }

      .right-video {
        display: inline-block;
        // justify-content: space-between;
        // flex-wrap: wrap;

        .content {
          width: 360px;
          margin-bottom: 40px;
          display: inline-block;
          margin-right: 36px;
          cursor: pointer;

          &:nth-child(3n) {
            margin-right: 0;
          }

          .image {
            width: 360px;
            height: 270px;
            position: relative;

            ::v-deep(.el-image) {
              width: 360px;
              height: 270px;
            }
          }

          .title {
            width: 360px;
            // line-height: 17px;
            font-size: 16px;
            font-weight: 600;
            color: #000;
            margin: 16px 0 12px;
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            white-space: nowrap;
          }

          .time-long {
            .mark,
            .text {
              // width: 72px;
              padding: 7px 10px;
              // height: 24px;
              position: absolute;
              right: 0;
              bottom: 0;
              font-size: 12px;
              color: #fff;
            }

            .mark {
              background: #000;
              opacity: 0.5;
            }
          }

          .foot {
            line-height: 16px;
            font-size: 16px;
            font-weight: bold;
            color: #999;

            .view_times {
              float: right;
            }

            .watch {
              float: right;
              margin-left: 8px;
            }
          }
        }
      }

      ::v-deep(.el-empty) {
        margin: 0 auto;
      }
    }
  }

  &.z-phone {
    .online-video-list {
      padding: pxtorem(40) pxtorem(24) pxtorem(60);
    }

    .banner {
      width: 100%;
      // height: pxtorem(388);

      .banner {
        height: pxtorem(388);
        width: 100%;
        object-fit: cover;
      }
    }

    .left-menu {
      ul {
        text-align: center;
      }

      .menu {
        width: pxtorem(110);
        display: inline-block;
        font-size: pxtorem(24);
        font-weight: bold;
        color: #898989;
        flex: 25%;
        text-align: center;
        margin-bottom: pxtorem(42);
        margin-right: pxtorem(78);

        &:last-child {
          margin: 0;
        }

        &.active-menu {
          color: #000;
          position: relative;
        }

        &.active-menu::after {
          content: "";
          width: pxtorem(100);
          height: pxtorem(4);
          background-color: #000;
          position: absolute;
          bottom: pxtorem(-6);
          left: pxtorem(5);
        }
      }
    }

    .right-video {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .content {
        width: pxtorem(340);
        margin-bottom: pxtorem(32);

        .image {
          width: 100%;
          height: pxtorem(245);
          position: relative;
          margin-bottom: pxtorem(17);

          ::v-deep(.el-image) {
            width: 100%;
            height: 100%;
          }

          .time-long {
            .mark,
            .text {
              // width: 72px;
              padding: pxtorem(7) pxtorem(10);
              // height: 24px;
              position: absolute;
              right: 0;
              bottom: 0;
              font-size: pxtorem(12);
              color: #fff;
            }

            .mark {
              background: #000;
              opacity: 0.5;
            }
          }
        }

        .title {
          width: pxtorem(340);
          font-size: pxtorem(22);
          color: #000;
          font-weight: 600;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }

        .foot {
          .name {
            font-size: pxtorem(20);
            font-weight: 600;
            color: #333;
          }

          .watch {
            float: right;
            color: #999;
            font-size: pxtorem(20);
          }

          .view_times {
            float: right;
            margin-right: pxtorem(7);
          }
        }
      }
    }

    // .look-more {

    // }
  }
}
</style>
